.tabs {
  position: relative;
}

// tabs-nav
.tabs-nav {
  position: relative;
  margin: 0px 0px -1px 0px;
  padding: 0px;
  line-height: 1.3em;
  letter-spacing: 1px;
  overflow: hidden;
  zoom: 1;
  z-index: 1;

  span, li{
    position: relative;
    display: inline;
    float: left;
    margin: 0px -1px 0px 0px;
    padding: .2em .5em;
    border-style: solid;
    border-color: #aaa;
    border-width: 1px 1px 0px 1px;
    cursor: pointer;

    min-width: 50px;
    text-align: center;
  }

  .tabs-nav-active {
    background-color: #fff;
    font-weight: bold;
  }

  &:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
  }
}
ul.tabs-nav {
  display: block;
  list-style: none;
}
h2.tabs-nav {
  font-size: 1em;
  font-weight:normal;
}

// tabs-panels
.tabs-panels {
  position: relative;
  border: 1px solid #aaa;
  padding: 5px 10px;

  .tabs-panel {
    position: relative;
    display: none;
  }

  .tabs-panel-active {
    display: block;
  }
}